<template>
    <div>

        <div style='height: 10px'></div>
        <div style='float: right'>
            <el-button icon='el-icon-circle-plus-outline' @click='addCategoryButton' size='small' type="success">添加分类</el-button>
        </div>


        <div>

        <el-table
            :data="categoryData"
            style="width: 100%"
            :border='border'>
            <el-table-column
                type="index"
                width="80">
            </el-table-column>

            <el-table-column
                prop="categoryName"
                label="分类名"
                width="260">
            </el-table-column>

            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">修改</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        </div>

        <el-dialog :title='title' :visible.sync="editCategoryD">
            <el-card class="box-card">
                <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="菜品分类名" prop="name">
                        <el-input required='required' type='text' maxlength="64" show-word-limit v-model="editCategoryF.categoryName"></el-input>
                    </el-form-item>

                </el-form>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editCategoryD = false">取 消</el-button>
                <el-button type="primary" @click='editCategoryM'>提 交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

export default {
    data(){
        return{
            border: true,
            title:'',
            editCategoryD: false,
            categoryData:[],
            editCategoryF:{
                categoryId: null,
                categoryName: ''
            }
        }
    },
    created() {
        this.getCategoryInfo();
    },
    methods:{
        getCategoryInfo(){
            const _this = this;
            //获取所有分类
            this.$http.get('dev-api/seller/foodCategory/findAll')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.categoryData = resp.data.data;
                    }else{
                        _this.$message.error("获取失败")
                    }
                })
                .catch(() => {
                    _this.$message.error("获取失败")
                })
        },

        //提交修改分类名
        editCategoryM(){
            console.log(this.editCategoryF.categoryId,this.editCategoryF.categoryName);
            const _this = this;
            this.$http.post('dev-api/seller/foodCategory/saveOrUpdate',_this.editCategoryF)
            .then(function(resp){
                if (resp.data.code === 0){
                    if(_this.title === '修改菜品分类名'){
                        _this.$message.success("修改分类名成功");
                    }else{
                        _this.$message.success("添加分类成功");
                    }

                    _this.editCategoryD = false;
                    _this.getCategoryInfo();
                }else{
                    _this.$message.error(resp.data.msg);
                }
            })
            .catch(() => {
                 _this.$message.error("失败请重试")
            })
        },
        //点击添加分类按钮
        addCategoryButton(){
            this.title = '添加菜品分类';
            this.editCategoryD = true;
            this.editCategoryF.categoryId = null;
            this.editCategoryF.categoryName = null;
        },

        //点击修改按钮
        handleEdit(row) {
            this.title = '修改菜品分类名';
            this.editCategoryD = true;
            this.editCategoryF.categoryId = row.categoryId;
            this.editCategoryF.categoryName = row.categoryName;
            console.log(row.categoryId,row.categoryName);
        },
        //删除分类
        handleDelete(row) {
            console.log(row.categoryId);
            const _this = this;
            this.$confirm('删除['+row.categoryName+']菜品分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.delete('dev-api/seller/foodCategory/delete/'+row.categoryId)
                .then(function(resp){
                    if (resp.data.code === 0){
                        //刷新数据
                        _this.getCategoryInfo();
                        _this.$message({
                            type: 'success',
                            message: '删除分类['+row.categoryName+']成功!'
                        });
                    }else{
                        _this.$message({
                            type: 'error',
                            message: resp.data.msg
                        });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },

    }

}
</script>